import React, { useState } from 'react';
import { Modal, Button, Row, Input, Col, Space, Tabs } from 'antd';
import UpdateCheck from './updateCheck';

const logo = require('@/assets/resource/icon.png');

function Path(props) {
  // const [visible, setVisible] = useState(false);

  const { visible, path, setVisible } = props;

  const [versionType, setVersionType] = useState<number>(1);
  const [percent,setPercent] = useState<number>(0)
  const [showPercent, setShowPercent] = useState<boolean>(false);
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);

   // 打开检查更新弹窗
   window.electron.ipcRenderer.on('downloadProgress', (data) => {
    setPercent(Math.round(data.percent))
  });
  window.electron.ipcRenderer.on('downloadEnd', (data) => {
    setShowPercent(!data)
  });

  window.electron.ipcRenderer.on('checkMessage', (type) => {
    setVersionType(type);
  });

  const typeList = {
    1:'版本更新',
    2:'检查中...',
    3:'版本更新（已是最新）',
    4:'版本更新（有新版本）',
    5:'检查更新失败'

  }


  const [type, setType] = useState<string>('main');
  const handleOk = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const version = window.electron.store.get('version')

  return (
    <div>
      <Modal
        title="设置"
        maskClosable={false}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        footer={false}
        cancelText="取消"
        width="750px"
      >
        <Row justify="space-between">
          <Col span="6">
            <Tabs
              style={{ height: 400 }}
              onChange={(val) => {
                setType(val);
              }}
              tabPosition="left"
              items={[
                {
                  label: `同步文件夹设置`,
                  key: 'main',
                },
                {
                  label: `关于`,
                  key: 'about',
                },
              ]}
            />
          </Col>

          {type === 'main' ? (
            <Col span="18">
              <Row style={{ marginBottom: 10, fontSize: 13 }}>
                设置同步文件夹路径：
              </Row>
              <Row justify="space-between">
                <Col span={19}>
                  <Input value={path} readOnly />
                </Col>
                <Col>
                  <Button
                    onClick={() => {
                      window.electron.ipcRenderer.sendMessage(
                        'path:openwindow'
                      );
                    }}
                  >
                    修改路径
                  </Button>
                </Col>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Space>
                  <Button
                    onClick={() => {
                      handleCancel();
                    }}
                  >
                    取消
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      handleOk();
                    }}
                  >
                    确认
                  </Button>
                </Space>
              </Row>
            </Col>
          ) : (
            <Col span="18" style={{ position: 'relative' }}>
              <div style={{ textAlign: 'center' }}>
                <img src={logo} alt="山东电建" width={100} height="auto" />
                <h3>工程数字化平台</h3>
                <p>{version}</p>

                <Button style={{ width: 200 }} onClick={()=>{
                  if(versionType==4){
                    window.electron.ipcRenderer.sendMessage('downloadUpdate')
                    setUpdateVisible(true)
                    setShowPercent(true)

                  }else if(versionType==1||versionType==5){
                    setVersionType(2)
                    window.electron.ipcRenderer.sendMessage('checkUpdate')
  
                  }
                  

                }}>{typeList[versionType]}</Button>
                <p
                  style={{
                    fontSize: 12,
                    color: '#a8a5a5',
                    position: 'absolute',
                    width: '100%',
                    bottom: '-10px',
                  }}
                >
                  Copyright @ 2022-2023 中国电建集团山东电力建设第一工程有限公司
                  版权所有
                </p>
              </div>
            </Col>
          )}
          
      <UpdateCheck
          showPercent={showPercent}
          percent={percent}
        visible={updateVisible}
        setVisible={(reload: boolean) => {
          if (reload) {
            // window.electron.ipcRenderer.sendMessage('path:save', folderPath);
          }
          setUpdateVisible(false);
        }}
      />
        </Row>
      </Modal>
    </div>
  );
}

export default Path;
